<template>
	<view>
		<view class="store-list" v-if="storeList.length">
			<view class="item-box" v-for="(store,i) in storeList" :key="i" @click="toStore(store.id)">
				<view class="left">
					<image :src="adminImgPath+store.logo_image" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="tit">{{store.name}}</view>
					<view class="row">营业时间：{{store.business_hours_start_times}}~{{store.business_hours_end_times}}</view>
					<view class="row">月售：{{store.sale_count}}</view>
					<view class="tag-box">
						<view class="tag-column" v-for="(tag, index) in store.json" :key="index">{{tag.intro}}</view>
					</view>
				</view>
			</view>
			<view class="loading" v-if="showLoading">
				<view class="downwarp-progress mescroll-rotate"></view>
				<view class="downwarp-tip">加载中</view>
			</view>
			<view class="foot" v-if="showFoot">
				<text>更多商家加入中，敬请期待</text>
			</view>
		</view>
		<view class="empty" v-else style="padding-top: 80px;">
			<empty imgUrl="/static/empty.png" tips="暂无相关商家～～" />
		</view>
	</view>
</template>

<script>
	import empty from '@/pages/Component/supermarket/component/empty/empty.vue';
	import ikz from '@/pages/Common/tools.js';
	var app = getApp();
	export default {
		components: {
			empty
		},
		name: "storeList",
		props: {
			showData: {
				type: String,
			},
			cssData:{
				type: Object,
			}
		},
		data() {
			return {
				adminImgPath: app.globalData.adminImgPath,
				storeList: [],
				showFoot: false,
				showLoading: false,
				hasMore: false,
				page: 1,
			};
		},
		watch: {
			showData: {
				handler(newName, oldName) {
					
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 获取商家列表
			getStoreList(id,keywords) {
				var path = '/xyb/supermarket/index/businsess_list';
				var data = {
					page: this.page,
					limit: 10
				};
				if(id) {
					data.business_category_id = id
				}
				if(keywords) {
					data.keywords = keywords
				}
				ikz.requestPost(path, data, res => {
					this.showLoading = false
					this.$emit("loadEnd")
					if (res.data.code) {
						let list = res.data.data.data
						if(this.page<res.data.data.total/10) {
							this.hasMore = true
						} else {
							this.showFoot = true
							this.hasMore = false
						}
						this.storeList = this.page === 1 ? list : [...this.storeList, ...list];
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				})
			},
			// 分页
			onBottom(navIndex) {
				if(this.hasMore) {
					this.showLoading = true
					this.page++
					this.getStoreList()
				}
			},
			// 跳转商家详情
			toStore(id) {
				if(!uni.getStorageSync('local_user_session')) {
					uni.redirectTo({
						url:"/pages/login/index"
					})
					return
				}	
				uni.navigateTo({
					url: '/pages/Component/supermarket/Program/store/index?id='+id
				})
			},
		},
	}
</script>

<style lang="scss">
	.store-list {
		.item-box {
			display: flex;
			margin-top: 22rpx;
			padding: 22rpx;
			background-color: #ffffff;
		
			.left {
				margin-right: 22rpx;
		
				image {
					width: 175rpx;
					height: 175rpx;
					border-radius: 10rpx;
				}
			}
		
			.right {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
		
				.tit {
					font-weight: 600;
					font-size: 30rpx;
					line-height: 38rpx;
					color: #333333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
				}
		
				.row {
					font-weight: 400;
					font-size: 26rpx;
					line-height: 28rpx;
					color: #979797;
					width: 100%;
				}
		
				.tag-box {
					display: flex;
					width: 100%;
					height: 28rpx;
		
					.tag-column {
						font-weight: 400;
						font-size: 20rpx;
						line-height: 24rpx;
						color: #FB7A26;
						padding: 2rpx 15rpx;
						background: #FFF2D9;
						border-radius: 15rpx;
						margin-left: 15rpx;
		
						&:first-child {
							margin: 0;
						}
					}
				}
			}
		}
	
		.loading {
			display: flex;
			justify-content: center;
			padding: 30rpx;
			
			.downwarp-progress {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				border: 2rpx solid gray;
				border-bottom-color: transparent;
				vertical-align: middle;
			}
			
			.mescroll-rotate {
				animation: mescrollDownRotate 0.6s linear infinite;
			}
			
			.downwarp-tip {
				display: inline-block;
				font-size: 28rpx;
				vertical-align: middle;
				margin-left: 16rpx;
				color: gray;
			}
		}
		
		@keyframes mescrollDownRotate {
			0% {
				transform: rotate(0deg);
			}
		
			100% {
				transform: rotate(360deg);
			}
		}
		
		.foot {
			position: relative;
			display: flex;
			justify-content: center;
			margin: 36rpx;
		
			text {
				font-size: 26rpx;
				position: relative;
				z-index: 2;
				height: 36rpx;
				line-height: 36rpx;
				color: #cccccc;
				padding: 0 22rpx;
			}
		}
	}
</style>
